<template>
  <div class="diagnosis-container">
    <!-- 头部操作区 -->
    <div class="header-actions">
      <div class="mode-switcher">
        <el-button plain @click="open">
          togo人工
        </el-button>
      </div>
    </div>

    <!-- 诊断结果主体 -->
    <el-card class="result-card">
      <template #header>
        <div class="card-header">
          <h3>{{ currentMode === 'normal' ? '基础优化建议' : '精准优化建议' }}</h3>
          <el-tag :type="currentMode === 'normal' ? '' : 'success'">
            {{ currentMode === 'normal' ? '常规分析' : 'JD匹配分析' }}
          </el-tag>
        </div>
      </template>

      <!-- 加载状态 -->
      <el-skeleton :rows="5" animated v-if="loading" />

      <!-- 结果内容 -->
      <template v-else>
        <div class="section" v-for="(section, index) in analysisData" :key="index">
          <h4 class="section-title">
            <el-icon><Document /></el-icon>
            {{ section.title }}
          </h4>
          <ul class="recommend-list">
            <li v-for="(item, idx) in section.items" :key="idx">
              <el-icon><Check /></el-icon>
              <div class="item-content">
                <p class="main-text">{{ item.content }}</p>
                <p v-if="item.example" class="example-text">示例: {{ item.example }}</p>
              </div>
            </li>
          </ul>
        </div>
      </template>
    </el-card>

    <!-- AI交互区 -->
    <div class="ai-interaction">
      <el-input
        v-model="additionalRequest"
        placeholder="是否有补充要求？输入后点击重新生成建议"
        clearable
        @keyup.enter="handleRegenerate"
      >
        <template #append>
          <el-button
            type="primary"
            :loading="regenerating"
            @click="handleRegenerate"
          >
            <template #default>
              <el-icon><Refresh /></el-icon>
              <span>重新生成</span>
            </template>
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- togo人工 -->
    <TabNav /> 
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
// import { Document, Check, Refresh } from '@element-plus/icons-vue';
import { diagnosisApi } from '@/views/resume/api/index.js'; 
import TabNav from '@/components/TabNav/TabNav.vue'

const route = useRoute();

const currentMode = ref('normal');
const loading = ref(true);
const analysisData = ref([]);
const additionalRequest = ref('');
const regenerating = ref(false);

// 修正模式判断逻辑
const isDj = () => {
  currentMode.value = route.query.jd ? 'jd' : 'normal';
}

// 新增人工请求提交
const submitManualRequest = async () => {
  try {
    await diagnosisApi.submitManualRequest({
      resumeId: route.params.resumeId,
      timestamp: new Date().toISOString()
    })
  } catch (error) {
    console.error('人工请求提交失败:', error)
    ElMessage.error('请求提交失败，请重试')
  }
}

// 人工建议信息（添加提交请求）
const open = () => {
  submitManualRequest() // 提交请求
  
  ElMessageBox.alert('人工建议将于一周内发放到你的邮箱和软件信息内，请注意查收', '消息通知', {
    confirmButtonText: 'OK',
    callback: (action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}

// 获取初始数据
const fetchData = async () => {
  try {
    const { data } = await diagnosisApi.getInitialDiagnosis({
      mode: currentMode.value, // 使用修正后的模式值
      resumeId: route.params.resumeId
    });
    analysisData.value = data.sections;
  } catch (error) {
    console.error('获取诊断结果失败:', error);
    ElMessage.error('获取诊断结果失败');
  } finally {
    loading.value = false;
  }
};

// 重新生成建议（保持不变）
const handleRegenerate = async () => {
  if (!additionalRequest.value.trim()) {
    return ElMessage.warning('请输入补充要求');
  }

  try {
    regenerating.value = true;
    const { data } = await diagnosisApi.regenerateDiagnosis({
      mode: currentMode.value,
      additional: additionalRequest.value
    });
    analysisData.value = data.sections;
    ElMessage.success('建议已更新');
    additionalRequest.value = '';
  } catch (error) {
    console.error('生成失败:', error);
    ElMessage.error('生成失败: ' + error.message);
  } finally {
    regenerating.value = false;
  }
};

// 修正生命周期调用
onMounted(() => {
  isDj()
  fetchData()
})
</script>

<style lang="scss" scoped>
.diagnosis-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;

  .header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;

    .mode-switcher {
      display: flex;
      gap: 14px;
    }

    .mode-switcher .el-button {
      margin-right: 0;
      padding: 12px 32px;
    }
  }

  .result-card {
    margin-bottom: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    .card-header {
      display: flex;
      align-items: center;
      gap: 16px;

      h3 {
        margin: 0;
        font-size: 20px;
        color: #1e293b;
      }
    }

    .section {
      margin-bottom: 32px;

      &-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #3b82f6;
        font-size: 16px;
        margin: 0 0 16px 0;
      }

      .recommend-list {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          display: flex;
          gap: 12px;
          padding: 16px;
          background: #f8fafc;
          border-radius: 8px;
          margin-bottom: 12px;
          transition: transform 0.2s;

          &:hover {
            transform: translateX(8px);
          }

          .el-icon {
            color: #10b981;
            font-size: 18px;
            margin-top: 4px;
          }

          .item-content {
            flex: 1;
            .main-text {
              margin: 0;
              color: #1e293b;
            }
            .example-text {
              margin: 8px 0 0;
              color: #64748b;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .ai-interaction {
    .el-input {
      :deep(.el-input-group__append) {
        height: 40px;
        background: var(--el-color-primary);
        border-color: var(--el-color-primary);
        .el-button {
          color: white;
          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }
}
</style>